﻿@model ViewModels.GuestBookVM.GuestBookMainVM

@{
    ViewBag.Title = "Hinoky.com :::: 방명록";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery.signalR-2.0.2.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(function() {
        var guestBookHub = $.connection.guestBookHub;

        guestBookHub.client.SendGuestBookArticle = function(guestBookArticle) {
            if (!guestBookArticle) return;

            var html = "";
            html += "<table style='font-size:1.2em;font-family:Segoe UI, Verdana, Helvetica, Sans-Serif; margin-top:10px; padding:10px; width:100%; border-width:1px; border-style:solid; border-color:gray)' >";
            html += "    <tr>";
            html += "        <td style='width:50%' >";
            html += "           Write By <b>" + guestBookArticle.GuestName;
            if (!guestBookArticle.GuestId) {
                html += "(" + guestBookArticle.GuestId + ")</b>";
            }
            html += "        </td>";
            html += "        <td style='text-align:right'>" + guestBookArticle.InsertDate + "</td>";
            html += "    </tr>";
            html += "    <tr>";
            html += "        <td colspan='3'>";
            html += "            <hr style='border-style:dotted' />";
            html += "        </td>";
            html += "    </tr>";
            html += "    <tr>";
            html += "        <td colspan='3'>" + guestBookArticle.Comment + "</td>";
            html += "    </tr>";
            html += "</table>";

            $("#divArticleList").prepend(html);
        };

        $.connection.hub.start();
    });

    $(document).ready(function () {
        $("#btnSave").on("click", function() {
            if ($("#txtWriterName").val() == "") {
                return alert("이름을 입력해주세요.");
            }
            
            if ($("#txtComment").val() == "") {
                return alert("댓글 내용을 입력해 주세요.");
            }

            if (!confirm("등록하시겠습니까?")) return false;

            saveContent();
        });
        
        function saveContent() {
            var nameVal = htmlEscape($("#txtWriterName").val());
            var userKeyVal = 0;
            var commentVal = htmlEscape($("#txtComment").val());
            var isPrivateVal = $("#chkIsPrivate").is(":checked");

            $.ajax({
                type: "POST",
                async: true,
                url: "/GuestBook/Create",
                data: { GuestName: nameVal, UserKey: userKeyVal, Comment: commentVal, IsPrivate: isPrivateVal },
                datatype: 'json',
                traditional: true,
                success: function (data) {
                    if (data.Success == true) {
                        alert("등록되었습니다.");
                        location.href = "/GuestBook/index";
                        
                        //guestBookHub.server.send($("#displayname").val(), $("#message").val());
                    }
                    else {
                        alert("등록에 실패하였습니다.");
                        location.href = "/GuestBook/index";
                    }
                },
                beforeSend: function () {
                    //showLoadingLayer();
                },
                complete: function () {
                    //hideLoadingLayer();
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        }
    });
</script>

<h2>Guest Book</h2>

<h4>MS SignalR 2.0 을 사용하여 만든 RealTime 방명록 입니다.</h4>
<br/>
<div class="featurebox_center">
    <table style="font-size:1.2em;font-family:Segoe UI, Verdana, Helvetica, Sans-Serif; width:100%">
        <tr>
            <td style="width:100px">
                WriterName
            </td>
            <td>
                <input type="text" id="txtWriterName" class="dashedtb" style="width:250px" />&nbsp;&nbsp;&nbsp;비밀글 여부 <input type="checkbox" id="chkIsPrivate" />
            </td>
        </tr>
        <tr>
            <td>
                
            </td>
            <td style="vertical-align:bottom" >
                <textarea id="txtComment" style="width:80%" rows="2" ></textarea>&nbsp; 
                <span class="button large icon"><span class="add"></span><input type="button" id="btnSave" value="Save"/></span>
            </td>
        </tr>
    </table>
</div>

<br />

<div id="divArticleList" class="featurebox_center">
    @foreach (var item in Model.GuestBookList)
    {
        <table style="font-size:1.2em;font-family:Segoe UI, Verdana, Helvetica, Sans-Serif; margin-top:10px; padding:10px; width:100%; border-width:1px; border-style:solid; border-color:@(item.IsPrivate ? "orange" : "gray")" >
            <tr>
                <td style="width:50%" >
                    @if (item.IsPrivate)
                    {
                        <span style="color:red">[비밀글]</span>
                    }
                    Write By <b>@item.GuestName
                                 @if (!string.IsNullOrEmpty(item.GuestId))
                                 {
                                     @Html.Raw("(" + item.GuestId + ")")
                                 }</b>
                </td>
                <td style="text-align:right" > @item.InsertDate.ToString("yyyy-MM-dd hh:mm:dd") </td>
            </tr>
            <tr>
                <td colspan="3">
                    <hr style="border-style:dotted" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    @item.Comment
                </td>
            </tr>
        </table>
    }
</div>




